@charset "utf-8";

$border_color: #e7e7e7;
$border_color_top: #f8f8f8;
$red_color: #eb413d;
$texthui_color: #878787;

$thWidth: 430px 130px 120px 120px 130px;
$count: length($thWidth);

.web{
    section{
        border: none;
        .progress{
            width: 930px;
            margin: 80px auto 35px;
            .flow{
                width: 186px;
            }
        }
        .content{
            color: $texthui_color;
            border: 1px solid $border_color;
            margin-bottom: 111px;
            .order_info{
                width: 405px;
                height: 280px;
                border-top: 5px solid $border_color_top;
                border-bottom: 1px solid $border_color;                
                font-size: 13px;
                padding: 40px 0 0 50px;
                hgroup{       
                    height: 50px;             
                    h1{
                        margin: 0;                        
                        font-size: 18px;
                    }
                    a{
                        display: inline-block;
                        margin-left: 18px;  
                        i{
                            color: $red_color;
                            font-size: 20px;
                            line-height: 28px;                                                      
                        }
                    }                    
                }
                .information{
                    width: 290px;
                    margin-bottom: 20px;
                    span{
                        width: 65px;
                        margin-right: 14px;
                        float: left;
                    }
                    p{
                        width: 211px;
                        text-align: justify;
                        float: right;
                    }
                }
                .more{
                    display: inline-block;
                    margin-left: -70px;
                    cursor: pointer;
                    i{
                        margin-left: 3px;
                        vertical-align: text-top;
                    }
                    &:hover{
                        color: $red_color;
                    }
                }
            }
            time{
                margin: 0 3px;
            }
            .state{
                width: 593px;
                height: 280px;
                font-size: 14px;
                border-top: 5px solid $border_color_top;
                border-left: 1px solid $border_color;
                border-bottom: 1px solid $border_color;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                padding: 30px 0;
                h1{
                    color: $red_color;
                    font-size: 24px;
                    a{
                        color: $red_color;
                    }
                }
                p{
                    i{
                        margin-right: 5px;
                        vertical-align: middle;
                    }
                }
                .detailed_info{
                    p:not(:first-child){
                        margin-top: 5px;
                    }
                    em,p:last-child{
                        color: #444F58; 
                    }
                    em{
                        margin-right: 20px;
                    }
                }
                .cancel{
                    display: block;
                    color: $texthui_color;
                    padding-right: 35px;
                    align-self: flex-end;
                    &:hover{
                        color: $red_color;
                    }
                }
            }
            .two_info{
                justify-content: center;
                .detailed_info{
                    margin-top: 20px;
                    p{
                        text-align: center;
                        &:not(:first-child){
                            margin-top: 5px;
                        }                        
                    }
                }
            }
            .table{
                width: 930px;
                margin: 30px auto 33px;
                table {
                    thead {
                        tr {
                            @for $i from 1 to $count {
                                th:nth-child(#{$i}) {
                                    width: nth($thWidth, $i);
                                }
                            }
                        }
                    }
                    i{
                        &.icon-rmb{
                            font-size: 12px;
                        }
                        &.icon-dengdai{
                            color: $red_color;
                            font-size: 14px;
                            display: block;
                            padding-top: 12px;
                        }
                    }
                    tbody{
                        tr{
                            td{
                                &:nth-child(4){
                                    a{
                                        color: $texthui_color;
                                        &:hover{
                                            color: $red_color;
                                        }
                                    }
                                }
                            }   
                            td[colspan]{
                                text-align: left;
                                span{
                                    margin-right: 10px;
                                }
                                div{
                                    display: inline-block;
                                    cursor: pointer;
                                    i{
                                        vertical-align: text-top;
                                        margin-right: 3px;
                                    }
                                    &:hover{
                                        color: $red_color;
                                    }
                                }
                            }                                                     
                        }
                    }
                    tfoot{
                        td:nth-child(2),td:last-child{
                            p{
                                height: 30px;
                                line-height: 30px;
                            }
                        }
                        td:last-child{
                            text-align: right;
                            padding-right: 25px;
                            p:last-child{
                                color: $red_color;
                                font-size: 22px;
                                i{
                                    font-size: 20px;
                                    vertical-align: top;
                                }
                            }                            
                        }
                    }
                }
            }
        }        
    }
}

